<template>
  <div>
    <h3>app组件</h3>
    <button @click="setDialog">显示弹出层</button>
    <!-- <Teleport to="#dialog">
      <child />
    </Teleport> -->
    <!-- <Teleport to="body">
      <child v-if="show" :setDialog="setDialog" />
    </Teleport> -->
    <child v-if="show" :setDialog="setDialog" />
  </div>
</template>

<script>
import { ref } from 'vue'
import child from './components/child.vue'

export default {
  components: {
    child
  },
  setup() {
    const show = ref(false)
    const setDialog = () => {
      show.value = !show.value
    }
    return {
      show,
      setDialog
    }
  }
}
</script>

<style lang="scss" scoped></style>
